<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 登录</title>
    <style>
        *{margin: 0;padding: 0;list-style: none}
        body{overflow: hidden;}
        .hry-login-wrapper{
            width: 100%;
            height: 100%;
            background: url("__static__/global/login/4.jpg") no-repeat;
            background-size:100% 100%;
            display: flex;
            align-items: center;
        }
        #Login{
            margin-left: 200px;
            width: 400px;
            padding:30px 63px;
            border: 1px solid rgba(0,0,0,0.2);
            border-radius: 15px;
            text-align: center;
            background: rgba(0,0,0,0.5);
        }
        .code-wrapper{
            display: flex;
        }
        #Login h3{font-size: 28px;font-weight: 700;color: #ffffff;font-family: 宋体;margin-bottom: 30px;cursor: move;margin-top: 0}
        #Login input.txt{width: 270px;height: 42px;color: #ffffff;background: rgba(45,45,45,.15);
                            border-radius: 6px;border: 1px solid rgba(255,255,255,.15);box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
                             -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;-moz-box-shadow:  0 2px 3px 0 rgba(0,0,0,.1) inset;
                            margin-bottom: 25px;text-shadow: 0 1px 2px rgba(0,0,0,.1);text-indent: 10px;}
		#Login input.txt2{width: 140px;height: 42px;color: #ffffff;background: rgba(45,45,45,.15);
                            border-radius: 6px;border: 1px solid rgba(255,255,255,.15);box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
                             -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;-moz-box-shadow:  0 2px 3px 0 rgba(0,0,0,.1) inset;
                            margin-bottom: 25px;text-shadow: 0 1px 2px rgba(0,0,0,.1);text-indent: 10px;
        margin-right: 10px}
        #Login input.but{background: #00C0DC;width: 272px;height: 44px;box-shadow: 0 15px 30px 0 rgba(255,255,255,.25)inset,
                             0 2px 7px 0 rgba(0,0,0,.2);-webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25)inset, 0 2px 7px 0 rgba(0,0,0,.2);
        -moz-box-shadow:  0 15px 30px 0 rgba(255,255,255,.25)inset, 0 2px 7px 0 rgba(0,0,0,.2); border: 0px;border-radius: 6px;
                            color: #ffffff;font-size: 14px;}
        #Login input:focus{outline: none;-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1)inset,0 2px 7px 0 rgba(0,0,0,.2);
                            -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1)inset,0 2px 7px 0 rgba(0,0,0,.2);
                            box-shadow:  0 2px 3px 0 rgba(0,0,0,.1)inset,0 2px 7px 0 rgba(0,0,0,.2); }
        input::-webkit-input-placeholder{color: #ffffff;}
		#code{display:block;width: 119px; border-radius: 5px; height: 42px}
    </style>
{load href="__static__/global/bootstrap/css/bootstrap.min.css" /}
{load href="__static__/global/bootstrap/css/font-awesome.min.css" /}
{load href="__static__/global/Amaranjs/amaran.min.css" /}
{load href="__static__/system/dist/css/AdminLTE.min.css" /}
</head>
<body>
<div class="hry-login-wrapper">
    <div id="Login">
    <h3  id="title" class="move">好融艺后台管理系统</h3>
    <form action="{:url('Login/checkLogin')}" method="POST" onsubmit="return false">
    <input  type="text" placeholder="请输入用户名" class="txt move" name="username" autocomplete="off" required />
    <input  type="password" placeholder="请输入密码" class="txt move" name="password" autocomplete="off" required />
    <div class="code-wrapper">
        <input  type="text" class="txt2 move" name="code" placeholder="请输入验证码" autocomplete="off" required ><img src="{:captcha_src()}" id="code" alt="captcha" onclick="this.src='{:captcha_src()}?rnd=' + Math.random();" />
    </div>
    <input  type="submit" class="but move login" id="submit"value="Sign in"/>
    </form>
    </div>
</div>
<!--<div id="bg_wrap">-->
    <!--<div><img src="__static__/global/login/1.jpg" alt=""width="100%"height="100%"/></div>-->
<!--</div>-->
<!--<div id="Login">-->
    <!--<h3  id="title" class="move">Admin Login</h3>-->
    <!--<form action="{:url('Login/checkLogin')}" method="POST" onsubmit="return false">-->
        <!--<input  type="text" placeholder="Username" class="txt move" name="username" autocomplete="off" required />-->
        <!--<input  type="password" placeholder="Password" class="txt move" name="password" autocomplete="off" required />-->
		<!--<input  type="text" class="txt2 move" name="code" placeholder="code" autocomplete="off" required ><img src="{:captcha_src()}" id="code" alt="captcha" onclick="this.src='{:captcha_src()}?rnd=' + Math.random();" />-->
        <!--<input  type="submit" class="but move login" id="submit"value="Sign in"/>-->
    <!--</form>-->
<!--</div>-->
{load href="__static__/global/jQuery/jquery-2.2.3.min.js" /}
{load href="__static__/global/bootstrap/js/bootstrap.min.js" /}
{load href="__static__/global/jQuery/jquery.form.js" /}
{load href="__static__/global/jQuery-gDialog/animate.min.css" /}
{load href="__static__/global/Amaranjs/jquery.amaran.min.js" /}
{load href="__static__/system/dist/js/login.js" /}
<script>
    //背景轮播
    // (function(){
    //     var timer=null;
    //     oImg=document.querySelectorAll('#bg_wrap div');
    //     var len=oImg.length;
    //     var index=0;
    //     timer=setInterval(function () {
    //         oImg[index].style.opacity=0;
    //         index++;
    //         index%=len;
    //         oImg[index].style.opacity=1;
    //     },5000)
    // })();
    
    //弹跳
    // (function () {
    //    var oMove=document.querySelectorAll('.move');
    //     var len=oMove.length;
    //     var timer=null;
    //     var timeout=null;
    //     var speed=3;
    //     move(len-1);
    //     function move(index){
    //         if(index<0){
    //             clearInterval(timer);
    //             clearTimeout(timeout);
    //             return;
    //         }
    //         var end=150+(index*60);
    //         timer=setInterval(function(){
    //             speed+=3;
    //             var T=oMove[index].offsetTop+speed;
    //             if(T>end){
    //                 T=end;
    //                 speed*=-1;
    //                 speed*=0.4;
    //             }
    //             oMove[index].style.top=T+'px';
    //         },20);
    //         timeout=setTimeout(function () {
    //             clearInterval(timer);
    //             index--;
    //             move(index);
    //         },900);
    //     }
    //
    // })()
</script>
</body>
</html>